<template>
    <Row :gutter="30">

        <Card style="margin:0 0 20px 0px">
            <Row class="form-row">
                <Form label-position="right" :model="filter" :label-width="90" inline>
                    <FormItem label="昵称">
                        <Input placeholder="昵称" v-model="filter.nickname" size="large" style="width: 250px"></Input>
                    </FormItem>
                    <FormItem label="手机号">
                        <Input placeholder="手机号" v-model="filter.phone" size="large" style="width: 250px"></Input>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" icon="md-search" size="large" @click="loadData()">
                            搜索
                        </Button>
                    </FormItem>
                </Form>
            </Row>
            <Table stripe border :columns="tableColumns" :data="tableData" size="large" ref="table">
            </Table>
            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
        </Card>
    </Row>
</template>
<script>
    import Treeselect from "@riophae/vue-treeselect";
    //加载数据
    let loadData = function() {
        let params = this.filter;
        params.pageNum = this.pageNum;
        params.pageSize = this.pageSize;
        //与后台交换数据
        this.postRequest("/api/boxUser/loadData", params).then(res => {
            if (res.code == 20000) {
                this.tableData = res.data.list;
                this.pageTotal = res.data.total;
            } else {
                this.tableData = [];
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        });
    };
    export default {
        components: {
            Treeselect
        },
        data() {
            return {
                //查询条件
                filter: {},
                //页码
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                //表单提交状态
                formLoading: false,
                tableData: [],
                tableColumns: [
                    {
                        title: "昵称",
                        key: "nickname"
                    },
                    {
                        title: "手机号",
                        key: "phone"
                    },
                    {
                        title: "创建时间",
                        key: "createdAt"
                    },
                ],
            };
        },

        created: function() {
            this.loadData();
        },
        methods: {
            loadData,
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            }
        }
    };
</script>

